/**
 * 课程编辑组件
 * 功能：编辑课程信息，包括课程封面、基本信息、内容图片和课程时间安排
 * 主要功能：
 * 1. 课程封面管理：上传、预览和删除封面图片
 * 2. 基本信息编辑：标题、分类、价格和详情
 * 3. 内容图片管理：支持上传和删除最多4张内容图片
 * 4. 课程时间安排：添加、删除和验证课程时间安排
 * 5. Markdown编辑器：支持课程详情的Markdown格式编辑和预览
 */
<template>
  <div class="create-course-container">
    <div class="form-container">
      <h2>编辑课程</h2>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
        <!-- 课程封面部分 -->
        <div class="form-section">
          <h3>课程封面</h3>
          <el-form-item label="课程封面" prop="titleImg">
            <el-upload
              class="image-uploader title-image-uploader"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="handleTitleImgSuccess"
              :before-upload="beforeImageUpload"
              :auto-upload="true"
              :data="{
                courseId: courseId,
                relationType: 'title',
                userId: safeGetItem('userId')
              }"
            >
              <div class="image-container" v-if="formData.titleImg">
                <img :src="formData.titleImg" class="preview-image title-preview-image">
                <div class="delete-icon" @click.stop="deleteImage('title')">
                  <el-icon><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
              <div class="upload-hint">点击更换图片</div>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 基本信息部分 -->
        <div class="form-section">
          <h3>基本信息</h3>
          <el-form-item label="课程标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入课程标题" />
          </el-form-item>
          
          <el-form-item label="课程分类" prop="categoryId">
            <el-select v-model="formData.categoryId" placeholder="请选择课程分类">
              <el-option
                v-for="item in categories"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="课程价格" prop="price">
            <el-input-number 
              v-model="formData.price" 
              :min="0" 
              :precision="2" 
              :step="0.1"
              placeholder="请输入课程价格"
            />
          </el-form-item>
          
          <el-form-item label="课程详情" prop="details">
            <div class="markdown-editor">
              <div class="editor-toolbar">
                <el-button-group>
                  <el-button size="small" @click="togglePreview">
                    <el-icon><View /></el-icon>
                    {{ isPreview ? '编辑' : '预览' }}
                  </el-button>
                </el-button-group>
                <div class="markdown-tips">
                  <el-tooltip
                    effect="dark"
                    placement="top"
                    :show-after="500"
                  >
                    <template #content>
                      <div class="markdown-help">
                        <h4>Markdown 语法提示：</h4>
                        <p># 一级标题</p>
                        <p>## 二级标题</p>
                        <p>**粗体**</p>
                        <p>*斜体*</p>
                        <p>- 无序列表</p>
                        <p>1. 有序列表</p>
                        <p>[链接文字](链接地址)</p>
                        <p>![图片描述](图片地址)</p>
                      </div>
                    </template>
                    <el-button size="small">
                      <el-icon><QuestionFilled /></el-icon>
                      语法帮助
                    </el-button>
                  </el-tooltip>
                </div>
              </div>
              <div class="editor-content">
                <el-input
                  v-if="!isPreview"
                  v-model="formData.details"
                  type="textarea"
                  :rows="8"
                  placeholder="支持 Markdown 格式，点击预览按钮查看效果"
                />
                <div v-else class="markdown-preview markdown-content" v-html="renderMarkdown(formData.details)"></div>
              </div>
            </div>
          </el-form-item>
        </div>

        <!-- 课程内容图片部分 -->
        <div class="form-section">
          <h3>课程内容图片</h3>
          <el-form-item label="内容图片1" prop="content1Img">
            <el-upload
              class="image-uploader content-image-uploader"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="handleContent1ImgSuccess"
              :before-upload="beforeImageUpload"
              :auto-upload="true"
              :data="{
                courseId: courseId,
                relationType: 'content1',
                userId: safeGetItem('userId')
              }"
            >
              <div class="image-container" v-if="formData.content1Img">
                <img :src="formData.content1Img" class="preview-image content-preview-image">
                <div class="delete-icon" @click.stop="deleteImage('content1')">
                  <el-icon><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
              <div class="upload-hint">点击更换图片</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="内容图片2" prop="content2Img">
            <el-upload
              class="image-uploader content-image-uploader"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="handleContent2ImgSuccess"
              :before-upload="beforeImageUpload"
              :auto-upload="true"
              :data="{
                courseId: courseId,
                relationType: 'content2',
                userId: safeGetItem('userId')
              }"
            >
              <div class="image-container" v-if="formData.content2Img">
                <img :src="formData.content2Img" class="preview-image content-preview-image">
                <div class="delete-icon" @click.stop="deleteImage('content2')">
                  <el-icon><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
              <div class="upload-hint">点击更换图片</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="内容图片3" prop="content3Img">
            <el-upload
              class="image-uploader content-image-uploader"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="handleContent3ImgSuccess"
              :before-upload="beforeImageUpload"
              :auto-upload="true"
              :data="{
                courseId: courseId,
                relationType: 'content3',
                userId: safeGetItem('userId')
              }"
            >
              <div class="image-container" v-if="formData.content3Img">
                <img :src="formData.content3Img" class="preview-image content-preview-image">
                <div class="delete-icon" @click.stop="deleteImage('content3')">
                  <el-icon><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
              <div class="upload-hint">点击更换图片</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="内容图片4" prop="content4Img">
            <el-upload
              class="image-uploader content-image-uploader"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="handleContent4ImgSuccess"
              :before-upload="beforeImageUpload"
              :auto-upload="true"
              :data="{
                courseId: courseId,
                relationType: 'content4',
                userId: safeGetItem('userId')
              }"
            >
              <div class="image-container" v-if="formData.content4Img">
                <img :src="formData.content4Img" class="preview-image content-preview-image">
                <div class="delete-icon" @click.stop="deleteImage('content4')">
                  <el-icon><Delete /></el-icon>
                </div>
              </div>
              <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
              <div class="upload-hint">点击更换图片</div>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 课程时间安排部分 -->
        <div class="form-section">
          <h3>设置具体课程安排<span class="required-hint">（必填项：至少添加一个）</span></h3>
          <div class="schedule-list">
            <div v-for="(schedule, index) in formData.teacherSchedule" :key="index" class="schedule-item">
              <schedule-time-range-picker
                v-model:date="schedule.date"
                v-model:startTime="schedule.startTime"
                v-model:endTime="schedule.endTime"
                v-model:repeatType="schedule.repeatType"
                v-model:repeatEndDate="schedule.repeatEndDate"
                @delete="removeSchedule(index)"
                @validate="(valid) => validateSchedule(index, valid)"
                :can-delete="formData.teacherSchedule.length > 1"
              />
            </div>
            <div class="add-button-container">
              <el-button type="primary" @click="addSchedule" class="add-btn">
                <i class="el-icon-plus"></i> 添加课程安排
              </el-button>
            </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="form-actions">
          <el-button type="primary" @click="submitForm" :loading="loading">保存修改</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, View, QuestionFilled } from '@element-plus/icons-vue'
import { getCourseDetail, updateCourseWithJson, deleteCourseImg } from '@/api/course'
import ScheduleTimeRangePicker from '@/components/common/ScheduleTimeRangePicker.vue'
import marked from 'marked'

export default {
  name: 'EditCourse',
  
  components: {
    Plus,
    Delete,
    ScheduleTimeRangePicker,
    View,
    QuestionFilled
  },
  
  setup() {
    // 路由和状态管理
    const route = useRoute()
    const router = useRouter()
    const formRef = ref(null)
    const loading = ref(false)
    const isPreview = ref(false)
    const scheduleValidations = ref([])
    
    /**
     * 安全地获取本地存储数据
     * @param {string} key - 存储键名
     * @param {string} defaultValue - 默认值
     * @returns {string} 存储的值或默认值
     */
    const safeGetItem = (key, defaultValue = '') => {
      try {
        return (localStorage && localStorage.getItem(key)) || 
               (sessionStorage && sessionStorage.getItem(key)) || 
               defaultValue
      } catch (e) {
        return defaultValue
      }
    }
    
    // 课程分类选项
    const categories = [
      { value: 1, label: '学术类课程' },
      { value: 2, label: '技术与工程类课程' },
      { value: 3, label: '商业与管理类课程' },
      { value: 4, label: '艺术与设计类课程' },
      { value: 5, label: '职业技能类课程' },
      { value: 6, label: '健康与医学类课程' },
      { value: 7, label: '语言与文化类课程' },
      { value: 8, label: '科技与未来趋势类课程' },
      { value: 9, label: '体育与健身类课程' }
    ]
    
    // 表单数据
    const formData = reactive({
      courseId: '',
      title: '',
      categoryId: '',
      price: 0,
      details: '',
      titleImg: '',
      content1Img: '',
      content2Img: '',
      content3Img: '',
      content4Img: '',
      teacherSchedule: []
    })
    
    // 表单验证规则
    const rules = {
      title: [
        { required: true, message: '请输入课程标题', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
      ],
      categoryId: [
        { required: true, message: '请选择课程分类', trigger: 'change' }
      ],
      price: [
        { required: true, message: '请输入课程价格', trigger: 'blur' }
      ],
      details: [
        { required: true, message: '请输入课程详情', trigger: 'blur' },
        { min: 1, message: '课程详情至少10个字符', trigger: 'blur' }
      ],
      teacherSchedule: [
        { 
          required: true, 
          validator: (rule, value, callback) => {
            if (!formData.teacherSchedule || formData.teacherSchedule.length === 0) {
              callback(new Error('请至少添加一个课程安排'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
    
    // 上传相关配置
    const uploadUrl = '/courseService/courseController/updateCourseImg'
    const uploadHeaders = {
      Authorization: safeGetItem('token')
    }
    
    /**
     * 获取课程详情
     * 从服务器获取课程信息并初始化表单数据
     */
    const fetchCourseDetail = async () => {
      try {
        const courseId = route.params.id
        const response = await getCourseDetail(courseId)
        if (response.code === 200) {
          const courseData = response.data
          // 处理课程时间格式
          if (courseData.teacherSchedule) {
            courseData.teacherSchedule = courseData.teacherSchedule.map(schedule => ({
              ...schedule,
              scheduleId: schedule.scheduleId,
              date: schedule.date === '00:00:00' ? '' : schedule.date,
              startTime: schedule.startTime ? new Date(`2000-01-01 ${schedule.startTime}`) : null,
              endTime: schedule.endTime ? new Date(`2000-01-01 ${schedule.endTime}`) : null
            }))
          }
          
          Object.assign(formData, courseData)
        } else {
          ElMessage.error(response.message || '获取课程信息失败')
        }
      } catch (error) {
        ElMessage.error('获取课程信息失败')
      }
    }
    
    /**
     * 图片上传前的验证
     * @param {File} file - 上传的文件对象
     * @returns {boolean} 是否允许上传
     */
    const beforeImageUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        ElMessage.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    }
    
    /**
     * 处理封面图片上传成功
     * @param {Object} response - 服务器响应
     */
    const handleTitleImgSuccess = (response) => {
      if (response.code === 200) {
        formData.titleImg = response.data
        ElMessage.success('封面图片上传成功')
      } else {
        ElMessage.error(response.message || '上传失败')
      }
    }
    
    /**
     * 处理内容图片1上传成功
     * @param {Object} response - 服务器响应
     */
    const handleContent1ImgSuccess = (response) => {
      if (response.code === 200) {
        formData.content1Img = response.data
        ElMessage.success('内容图片1上传成功')
      } else {
        ElMessage.error(response.message || '上传失败')
      }
    }
    
    /**
     * 处理内容图片2上传成功
     * @param {Object} response - 服务器响应
     */
    const handleContent2ImgSuccess = (response) => {
      if (response.code === 200) {
        formData.content2Img = response.data
        ElMessage.success('内容图片2上传成功')
      } else {
        ElMessage.error(response.message || '上传失败')
      }
    }
    
    /**
     * 处理内容图片3上传成功
     * @param {Object} response - 服务器响应
     */
    const handleContent3ImgSuccess = (response) => {
      if (response.code === 200) {
        formData.content3Img = response.data
        ElMessage.success('内容图片3上传成功')
      } else {
        ElMessage.error(response.message || '上传失败')
      }
    }
    
    /**
     * 处理内容图片4上传成功
     * @param {Object} response - 服务器响应
     */
    const handleContent4ImgSuccess = (response) => {
      if (response.code === 200) {
        formData.content4Img = response.data
        ElMessage.success('内容图片4上传成功')
      } else {
        ElMessage.error(response.message || '上传失败')
      }
    }
    
    /**
     * 添加课程时间安排
     */
    const addSchedule = () => {
      formData.teacherSchedule.push({
        scheduleId: null,
        date: '',
        startTime: null,
        endTime: null,
        repeatType: 'once',
        repeatEndDate: ''
      })
    }
    
    /**
     * 删除课程时间安排
     * @param {number} index - 要删除的时间安排索引
     */
    const removeSchedule = (index) => {
      // 确保至少保留一条数据
      if (formData.teacherSchedule.length > 1) {
        formData.teacherSchedule.splice(index, 1)
      } else {
        ElMessage.warning('至少需要保留一条课程安排')
      }
    }
    
    /**
     * 验证课程时间安排
     * @param {number} index - 时间安排索引
     * @param {boolean} isValid - 是否有效
     */
    const validateSchedule = (index, isValid) => {
      scheduleValidations.value[index] = isValid
    }
    
    /**
     * 验证表单数据完整性
     * @returns {boolean} 数据是否完整
     */
    const validateFormData = () => {
      // 验证课程安排
      if (formData.teacherSchedule.length === 0) {
        ElMessage.warning('请至少添加一条课程安排')
        return false
      }
      
      // 验证每条课程安排数据是否完整
      const scheduleValid = formData.teacherSchedule.every((item, index) => {
        const isValid = scheduleValidations.value[index]
        if (!isValid) {
          ElMessage.warning(`第${index + 1}条课程安排数据不完整，请检查`)
        }
        return isValid
      })
      
      if (!scheduleValid) {
        return false
      }
      
      return true
    }
    
    /**
     * 提交表单
     * 验证表单数据并提交到服务器
     */
    const submitForm = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        
        // 再次验证数据的完整性，确保数据安全
        if (!validateFormData()) {
          loading.value = false
          return
        }
        
        // 处理课程安排的时间格式
        const scheduleList = formData.teacherSchedule.map(schedule => {
          return {
            scheduleId: schedule.scheduleId,
            date: schedule.date,
            startTime: schedule.startTime ? `${schedule.date} ${schedule.startTime.toTimeString().slice(0, 5)}:00` : '',
            endTime: schedule.endTime ? `${schedule.date} ${schedule.endTime.toTimeString().slice(0, 5)}:00` : '',
            repeatType: schedule.repeatType,
            repeatEndDate: schedule.repeatEndDate,
            replaceAll: true  // 添加标记，指示后端进行全量替换
          }
        })
        
        // 准备发送到后端的数据
        const updateData = {
          courseId: courseId.value, // 课程ID必须传给后端
          title: formData.title,
          categoryId: formData.categoryId,
          price: formData.price,
          description: formData.details, // 注意字段名变更：details -> description
          schedules: JSON.stringify(scheduleList) // 将数组转为JSON字符串
        }
        
        const response = await updateCourseWithJson(updateData)
        
        if (response.code === 200) {
          ElMessage.success('课程更新成功')
          router.push('/my-courses')
        } else {
          ElMessage.error(response.message || '更新失败')
        }
      } catch (error) {
        ElMessage.error('请检查表单填写是否正确')
      } finally {
        loading.value = false
      }
    }
    
    /**
     * 取消编辑
     */
    const cancelEdit = () => {
      router.back()
    }
    
    // 计算属性：获取课程ID
    const courseId = computed(() => route.params.id)
    
    /**
     * 删除图片
     * @param {string} relationType - 图片类型（title/content1/content2/content3/content4）
     */
    const deleteImage = (relationType) => {
      ElMessageBox.confirm('确定要删除该图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        loading.value = true
        
        deleteCourseImg(courseId.value, relationType)
          .then(res => {
            if (res.success) {
              ElMessage.success('删除成功')
              // 清空对应的图片URL
              if (relationType === 'title') {
                formData.titleImg = ''
              } else if (relationType === 'content1') {
                formData.content1Img = ''
              } else if (relationType === 'content2') {
                formData.content2Img = ''
              } else if (relationType === 'content3') {
                formData.content3Img = ''
              } else if (relationType === 'content4') {
                formData.content4Img = ''
              }
            } else {
              ElMessage.error(res.message || '删除失败')
            }
          })
          .catch(error => {
            ElMessage.error(`删除图片失败: ${error.message || '未知错误'}`)
          })
          .finally(() => {
            loading.value = false
          })
      }).catch(() => {
        // 取消删除操作
      })
    }
    
    /**
     * 切换Markdown预览模式
     */
    const togglePreview = () => {
      isPreview.value = !isPreview.value
    }
    
    /**
     * 渲染Markdown内容
     * @param {string} content - Markdown文本
     * @returns {string} 渲染后的HTML
     */
    const renderMarkdown = (content) => {
      if (!content) return ''
      try {
        return marked(content)
      } catch (error) {
        return content
      }
    }
    
    onMounted(() => {
      fetchCourseDetail()
      
      // 确保至少有一条课程安排
      setTimeout(() => {
        if (!formData.teacherSchedule || formData.teacherSchedule.length === 0) {
          addSchedule()
        }
      }, 500) // 延迟执行，确保在获取课程详情之后
    })
    
    return {
      formRef,
      formData,
      rules,
      loading,
      categories,
      uploadUrl,
      uploadHeaders,
      beforeImageUpload,
      handleTitleImgSuccess,
      handleContent1ImgSuccess,
      handleContent2ImgSuccess,
      handleContent3ImgSuccess,
      handleContent4ImgSuccess,
      addSchedule,
      removeSchedule,
      submitForm,
      cancelEdit,
      courseId,
      safeGetItem,
      deleteImage,
      isPreview,
      togglePreview,
      renderMarkdown,
      validateSchedule,
      validateFormData
    }
  }
}
</script>

<style scoped>
.create-course-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.create-course-box {
  max-width: 1400px;
  margin: 0 auto;
}

.course-content {
  display: grid;
  grid-template-columns: minmax(1000px, 1fr) 300px;
  gap: 20px;
}

.course-main-info {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  min-width: 1000px;
}

.form-container {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
  margin-bottom: 30px;
  color: #333;
}

.form-section {
  margin-bottom: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

.form-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.title-image-uploader {
  width: 1000px;
  height: auto;
  aspect-ratio: 16/9;
}

.content-image-uploader {
  width: 1000px;
  height: auto;
  aspect-ratio: 16/9;
}

.image-uploader:hover {
  border-color: #409EFF;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.2);
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}

.title-image-uploader .image-uploader-icon {
  width: 1000px;
  height: 562.5px;
  line-height: 562.5px;
}

.content-image-uploader .image-uploader-icon {
  width: 1000px;
  height: 562.5px;
  line-height: 562.5px;
}

.preview-image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.title-preview-image {
  width: 1000px;
  height: 562.5px;
}

.content-preview-image {
  width: 1000px;
  height: 562.5px;
}

.schedule-section {
  margin-bottom: 30px;
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.time-separator {
  margin: 0 10px;
  color: #666;
}

/* 添加按钮样式 */
.add-btn {
  width: 200px !important;
  margin: 10px auto !important;
  display: block !important;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .schedule-item {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .schedule-item > * {
    flex: 1 1 calc(50% - 10px);
    min-width: 120px;
  }
  
  .time-separator {
    flex: 0 0 auto;
  }

  .el-button.is-circle {
    flex: 0 0 auto;
  }
}

.schedule-section h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

.required-hint {
  color: #f56c6c;
  font-size: 14px;
  font-weight: normal;
}

/* 添加新的删除按钮样式 */
.delete-btn-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
  background-color: #f8f9fa;
  margin-left: auto;
}

.delete-btn-wrapper:hover {
  background-color: #f2f2f2;
}

.delete-text {
  color: #f56c6c;
  font-size: 14px;
}

.add-button-container {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.form-actions .el-button {
  min-width: 120px;
  margin: 0 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset;
}

.availability-item, .schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.image-upload-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.upload-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  transition: opacity 0.3s;
  opacity: 0;
}

.image-uploader:hover .upload-hint {
  opacity: 1;
}

.image-container {
  position: relative;
}

.delete-icon {
  position: absolute;
  top: 15px;
  right: 25px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.2s ease;
  z-index: 10;
  font-size: 18px;
  opacity: 0.8;
  backdrop-filter: blur(2px);
}

.delete-icon:hover {
  opacity: 1;
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.8);
}

.markdown-editor {
  width: 100%;
}

.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}

.markdown-tips {
  display: flex;
  align-items: center;
}

.editor-content {
  width: 100%;
}

.markdown-preview {
  min-height: 300px;
  width: 100%;
}

.markdown-help {
  padding: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.markdown-help h4 {
  margin: 0 0 8px 0;
  color: #409eff;
}

.markdown-help p {
  margin: 4px 0;
  color: #606266;
}

/* Markdown内容样式 */
.markdown-content {
  line-height: 1.6;
  color: #333;
}

.markdown-content :deep(h1) {
  font-size: 1.8em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content :deep(h2) {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content :deep(h3) {
  font-size: 1.3em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content :deep(p) {
  margin-bottom: 1em;
}

.markdown-content :deep(ul), .markdown-content :deep(ol) {
  margin-bottom: 1em;
  padding-left: 2em;
}

.markdown-content :deep(li) {
  margin-bottom: 0.5em;
}

.markdown-content :deep(code) {
  background-color: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

.markdown-content :deep(pre) {
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  margin-bottom: 1em;
}

.markdown-content :deep(blockquote) {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  margin-left: 0;
  color: #666;
}

.markdown-content :deep(a) {
  color: #1890ff;
  text-decoration: none;
}

.markdown-content :deep(a:hover) {
  text-decoration: underline;
}

.markdown-content :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin: 1em 0;
}

.markdown-content :deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.markdown-content :deep(th), .markdown-content :deep(td) {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.markdown-content :deep(th) {
  background-color: #f5f5f5;
}

:deep(.el-textarea__inner) {
  min-height: 300px !important;
}

/* 调整表单项内容区域尺寸 */
:deep(.el-form-item__content) {
  width: 100% !important;
}

:deep(.el-form-item__content .el-input),
:deep(.el-form-item__content .el-select),
:deep(.el-form-item__content .el-input-number) {
  width: 100% !important;
}
</style> 